<template>
	<view class="vui-slider">
		<swiper :current="dots" :interval="2000" :duration="1000" @change="switchItem">
			<block v-for="(item, k1) in lists" :key="k1">
				<swiper-item>
					<block v-for="(it, k2) in item" :key="k2">
						<view class="vui-slider-i" :style="{width: (100/vuiLen) + '%'}">
							<view @click="action1(it.id)">
								<view class="img">
									<image :src="it.logo" lazy-load="true" @error="imgError(k1, k2)" v-if="it.logo"></image>
									<image class="no-img" v-else></image>
									<!-- <image src="../../static/51.png" lazy-load="true" class="vip"></image> -->
								</view>
								<view class="n clamp clamp-1">{{it.name}}</view>		
							</view>
							<view class="btn" v-if="it.is_attention === 1">已关注</view><view class="btn" @click="action2(it.id, k1, k2)" v-else>关注</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
		<view class="vui-slider-dots">
			<block v-for="(it, k4) in lists" :key="k4">
				<image :src="dots >= k4 ? '../../static/dot1.png' : '../../static/dot2.png'" lazy-load="true"></image>
				<text :style="{color: dots >= k4+1 ? '#82d7d0' : '#e5e5e5'}" v-show="lists.length-1 > k4">····</text>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'vui-slider',
		props: ['vuiData', 'vuiLen'],
		data() {
			return {
				lists: [],
				dots: 0,
				num: 5,
			}
		},
		/**
		 * @des 此处用小程序onLoad无法实现H5端
		 */
		mounted() {
			this.num = this.vuiLen || 5;
			this.dataGroup(this.vuiData);
		},
		/**
		 * @des 监测数据变化
		 */
		watch: {
			vuiData(val) {
				this.dots = 0;
				this.dataGroup(val);
			}
		},
		methods: {
			/**
			 * @des 数据分组处理
			 */
			dataGroup(val) {
				let tmpArr = [], num = this.num;
				for(var i=0,len=Math.ceil(val.length/num); i<len; i++) {
					tmpArr[i] = val.slice(i*num, (i+1)*num);
				}
				this.lists = tmpArr;
			},
			/**
			 * @des action
			 */
			action1(id) {
				const val = {};
				val.id = id;
				console.log(val)
				this.$emit('vuiTap1', val)
			},
			action2(id,i1,i2) {
				const val = {}, i = (i1 * this.vuiLen) + i2;
				val.id = id;
				val.i = i;
				console.log(val)
				this.$emit('vuiTap2', val)
			},
			/**
			 * @des 滑块current变化时触发
			 */
			switchItem(e) {
				this.dots = e.detail.current;
			},
			/**
			 * @des 图片加载未成功触发
			 */
			imgError(i1,i2) {
				let tmpArr = this.lists;
				tmpArr[i1][i2].logo = '../../static/avatars_default.png';
				this.lists = tmpArr;
			},
		}
	}
</script>

<style>
	/* slider/ 样式可在App.vue中修改 */
	.vui-slider swiper {height: 210upx; padding: 30upx 10upx 10upx;}
	.vui-slider swiper swiper-item {display: flex; align-items: flex-start; flex-wrap: wrap;}
	.vui-slider .vui-slider-i {text-align: center;}
	.vui-slider .vui-slider-i .img {position: relative; width: 100upx; height: 100upx; margin: 0 auto;}
	.vui-slider .vui-slider-i .img image {width: 100%; height: 100%; border-radius: 100%;}
	.vui-slider .vui-slider-i .img .vip {position: absolute; bottom: 10upx; right: -10upx; width: 28upx; height: 28upx; z-index: 111;}
	.vui-slider .vui-slider-i .n {margin: 10upx 0;}
	.vui-slider .vui-slider-i .btn {display: inline-block; height: 42upx; padding: 0 15upx; line-height: 42upx; border-radius: 42upx; font-size: 22upx; color: #fff; background-color: #82d7d0;}
	.vui-slider .vui-slider-dots {width: 100%; height: 70upx;}
	.vui-slider .vui-slider-dots image {width: 26upx; height: 26upx; margin: 0 4upx; vertical-align: middle;}
	.vui-slider .vui-slider-dots text {font-size: 20upx; font-weight: 600;}
</style>
